今天的實作內容是改寫前端網頁的輸入框，不囉嗦，直接上扣
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket Client</title>
</head>
<body>
<h1>WebSocket Client Example</h1>
<div id="messages"></div>
<input type="text" id="inputMessage" placeholder="Enter a message">
<button id="sendButton">Send</button>
<script>
const messagesDiv = document.getElementById('messages');
const inputMessage = document.getElementById('inputMessage');
const sendButton = document.getElementById('sendButton');
const socket = new WebSocket("ws://localhost:8765/");
socket.onopen = (event) => {
console.log("Connected to server");
};
socket.onmessage = (event) => {
const message = event.data;
const messageElement = document.createElement('p');
messageElement.textContent = message;
messagesDiv.appendChild(messageElement);
};
socket.onclose = (event) => {
console.log("disconnected to server");
};
const isCmd = (s) => s.trim().startsWith('/')
let cmdId = 1
const send = () => {
const message = inputMessage.value;
if (message === '') return;
if (isCmd(message)) {
const [cmd, ...args] = message.split(' ')
payload = JSON.stringify({ id: cmdId, type: cmd.slice(1), args})
} else {
payload = JSON.stringify({type: "chat", message})
}
socket.send(payload);
inputMessage.value = '';
}
sendButton.addEventListener('click', send);
inputMessage.addEventListener('keydown', (e) => {
// console.log(e.code)
if (e.code === 'Enter') {
send()
}
}, false);
</script>
</body>
</html>
今天改寫的重點如下：
實作方式是 input bar 監聽 keydown 事件，身為鍵盤黨一定要有的改寫，不然每次都要按那個按鈕才能送出，使用體驗真的不是很暢快。
這部分其實是想復刻以前網路遊戲聊天室輸入的指令模式，所有的指令都是以 / 開頭，後面就是用空白字元區分不同參數。
/create-room 建立房間/join-room {room} 加入房間/who 查詢目前線上所有玩家列表/add 1 2 3 ... 數字加總/ban {user_name} 剔除玩家/chat {user_name} {message} 傳送一對一訊息給指定玩家以上都是符合指令格式的寫法，理論上架構寫好之後就照著格式就蠻好處理的
打包好的指令 json 結構
目前沒有處理「/」開頭的聊天訊息，可以減少要處理的例外事項
打包好的聊天 json 結構
chat
實作內容基本上是以自己需求出發，同時因為每天可用的時間極度有限，所以都是作一點作一點這樣。如果各位看官有任何疑問或建議都歡迎在底下留言提出唷～
明天接著就會是改 server 端接收請求的部分，然後 client 端為了要處理不同順序回來的回傳資料，需要有一個專門點貨/收貨/轉交的功能模組。希望明天能夠順利把功能生出來～
iThome鐵人賽
看影片追技術